$(function () {
  // 抽取获取分类数据的逻辑为函数
  function getList () {
    // 获取列表数据
    $.ajax({
      url: BigNew.category_list,
      type: 'get',
      success (backData) {
        // console.log(backData)
        // 调用模板引擎
        let temHtml = template('categoryTem', backData)
        // console.log(temHtml)
        // 渲染到页面上
        $('tbody').html(temHtml)
      }
    })
  }

  // 默认获取一次列表数据
  getList()

  // 点击弹出新增分类模态框
  $('#showAddBtn').click(function () {
    // 清空弹框中的内容
    $('#addModal .modal-title').text('新增文章分类')
    $('#category_name').val('')
    $('#category_slug').val('')
    $('#addModal .btn-add').text('提交')
    // 直接把id保存到按钮上
    $('#addModal .btn-add').attr('data-id', '')
    // 弹出模态框
    $('#addModal').modal('show')
  })

  // 为新增模态框绑定点击事件  新增按钮
  $('.btn-add').click(function () {
    // 获取 名字
    let name = $('#category_name')
      .val()
      .trim()
    // 获取 别名
    let slug = $('#category_slug')
      .val()
      .trim()
    // 非空判断
    if (name == '' || slug == '') {
      alert('老铁写点东西呗!!!')
      return
    }

    // 获取id
    let id = $(this).attr('data-id')
    if (id) {
      // id存在
      // 修改逻辑
      $.ajax({
        url: BigNew.category_edit,
        type: 'post',
        data: {
          id,
          name,
          slug
        },
        success (backData) {
          // console.log(backData)
          if (backData.code == 200) {
            getList()
            // 清空弹框中的内容
            $('#addModal .modal-title').text('新增文章分类')
            $('#category_name').val('')
            $('#category_slug').val('')
            $('#addModal .btn-add').text('提交')
            // 直接把id保存到按钮上
            $('#addModal .btn-add').attr('data-id', '')
            // 并关闭
            $('#addModal').modal('hide')
          }
        }
      })
    } else {
      // id不存在
      // 不为空 新增逻辑
      $.ajax({
        url: BigNew.category_add,
        type: 'post',
        data: {
          name,
          slug
        },
        success (backData) {
          // console.log(backData)
          if (backData.code == 201) {
            alert('新增成功')
            // 重新获取列表数据
            getList()
            // 关闭新增框
            $('#addModal').modal('hide')
            // 清空输入框 01 -直接清除
            // 清空名字
            // $('#category_name').val('')

            // 清除 别名
            // $('#category_slug').val('')

            // 清空输入框02 - form的reset方法 很多个用这个方法便捷一些
            $('form')[0].reset()
          }
        },
        error (xhr, status, error) {
          // console.log(xhr)
          // console.log(status)
          // console.log(error)
          alert(xhr.responseJSON.msg)
          // 关闭新增框
          $('#addModal').modal('hide')
        }
      })
    }
  })

  // 点击删除
  // $('.btn-del').click(function () {
  //   alert('点击删除')
  // })
  // tbody中的 .btn-del点击会触发就算是动态添加的也无所谓
  $('tbody').on('click', '.btn-del', function () {
    // alert('点击删除')
    // 获取id
    let id = $(this)
      .parent()
      .attr('data-id')
    // console.log(id)

    // 保存this dom
    let _this = this
    // 询问
    if (confirm('老铁,你真的要把他删掉 55555!')) {
      $.ajax({
        url: BigNew.category_delete,
        type: 'post',
        data: {
          id
        },
        success (backData) {
          // console.log(backData)
          if (backData.code == 204) {
            // 重新获取数据
            // getList()
            // 直接移除自己所在的 tr
            // $(_this) 变成了jQ对象
            $(_this)
              .parent()
              .parent()
              .remove()
          }
        }
      })
    }
  })

  // 点击编辑 委托
  $('tbody').on('click', '.btn-edit', function () {
    // 获取id
    let id = $(this)
      .parent()
      .attr('data-id')
    // ajax获取数据
    $.ajax({
      url: BigNew.category_search,
      data: {
        id
      },
      success (backData) {
        // console.log(backData)
        // 修改内容
        $('#addModal .modal-title').text('修改文章分类')
        $('#category_name').val(backData.data[0].name)
        $('#category_slug').val(backData.data[0].slug)
        $('#addModal .btn-add').text('保存')
        // 直接把id保存到按钮上
        $('#addModal .btn-add').attr('data-id', backData.data[0].id)
        // 弹框
        $('#addModal').modal('show')
      }
    })
  })
})
